<template>
	<el-row style="margin-top: 10px">
        <el-col :span="24" style="margin-bottom: 20px">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }"><b>系统</b></el-breadcrumb-item>
            <el-breadcrumb-item>账号管理</el-breadcrumb-item>
          </el-breadcrumb>
        </el-col>
        <el-col style="margin-top: 20px">
            <el-button type="primary" @click="createDept = false">新建部门</el-button><br/><br/>
    		<el-tree
              :data="data2"
              :props="defaultProps"
              node-key="id"
              default-expand-all
              :expand-on-click-node="true"
              :render-content="renderContent">
            </el-tree>
        </el-col>
        <el-col>
            <el-dialog title="修改部门名称" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="名称" :label-width="formLabelWidth">
                        <el-input v-model="form.name" auto-complete="off" style="width: 300px"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                </div>
            </el-dialog>
            <el-dialog title="上级部门名称" :visible.sync="dialogOptionVisible">
                <el-form :model="Option">
                    <el-form-item label="活动区域" :label-width="formLabelWidth">
                      <el-select v-model="Option.parent" placeholder="请选择上级部门">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                      </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogOptionVisible = false">取 消</el-button>
                    <el-button type="primary" @click="dialogOptionVisible = false">确 定</el-button>
                </div>
            </el-dialog>
        </el-col>
	</el-row>
</template>

<script type="text/javascript">
	import ElCol from 'element-ui/packages/col/src/col'
    import ElForm from '../../../node_modules/element-ui/packages/form/src/form.vue'
    import axios from 'axios'
    import $ from 'jquery'

    let id = 1000;

    export default{
    	components: {
	      ElForm,
	      ElCol
    	},

    	data(){
    		return{
                dialogFormVisible:false,
                dialogOptionVisible:false,
                form: {
                  name: '',
                },
                Option:{
                  parent:'',
                },
    			data2: [{
                  id: 1,
                  label: '一级 1',
                  children: [{
                    id: 4,
                    label: '二级 1-1',
                    children: [{
                      id: 9,
                      label: '三级 1-1-1'
                    }, {
                      id: 10,
                      label: '三级 1-1-2'
                    }]
                  }]
                }, {
                  id: 2,
                  label: '一级 2',
                  children: [{
                    id: 5,
                    label: '二级 2-1'
                  }, {
                    id: 6,
                    label: '二级 2-2'
                  }]
                }, {
                  id: 3,
                  label: '一级 3',
                  children: [{
                    id: 7,
                    label: '二级 3-1'
                  }, {
                    id: 8,
                    label: '二级 3-2'
                  }]
                }],
                defaultProps: {
                  children: 'children',
                  label: 'label'
                }
            }
    	},

        mounted(){

        },

    	methods:{
            append(store, data) {
                store.append({ id: id++, label: 'testtest', children: [] }, data);
            },

            remove(store, data) {
                store.remove(data);
            },

            ChangeName(){
                this.dialogFormVisible = true
            },

            ChangeParent(){
                this.dialogOptionVisible = true
            },

            renderContent(h, { node, data, store }) {
                return(
                    <span>
                        <span>
                          <span>{node.label}</span>
                        </span>
                        <span style="float: right; margin-right: 20px">
                          <el-button size="mini" on-click={ () => this.append(store, data) }>Append</el-button>
                          <el-button size="mini" on-click={ () => this.remove(store, data) }>Delete</el-button>
                          <el-button size="mini" on-click={ () => this.ChangeName() }>ChangeName</el-button>
                          <el-button size="mini" on-click={ () => this.ChangeParent() }>ChangeParent</el-button>
                        </span>
                    </span>);
            }
    	},
    }
</script>

<style type="text/css">
	

</style>